<template>
  <div class="h-full w-full">
    <div id="xztarget" class="w-full h-full"></div>

  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, watch } from 'vue';
import type { Anqing } from "@/apis/homeApi";

const props = defineProps({
  data: {
    type: Object as () => Anqing,
    require: true,
  }
})

//初始化ecahrts实例
let xzChart: echarts.ECharts

onMounted(() => {
  xzChart = echarts.init(document.getElementById('xztarget') as HTMLDivElement)
  renderChart()
})
//构建option配置对象
const renderChart = () => {
  const xzoption = {
    title: {
      text: '当年全市行政案件',
      // subtext: `总行政案件数:${props.data?.XingZhengShu}件`,
      left: 'center',
      textStyle: {
        color: '#fff'
      },
      subtextStyle: {
        color: '#fff'
      }
    },
    xAxis: {
      type: 'category',
      data: props.data!.XingZhengFenZu.map((item)=>{
        if(item=='承德市公安局'){
          item = '市局'
        } else{
          item = item.substring(0,item.length-2)
        }
        return item
      }),
      axisLabel: {
        rotate: 60,
        color: '#9eb1c8'
      },
      axisLine: {
        show: true,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      max: function (value: { max: number, min: number }) {
        return value.max * 1.5
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false
      }
    },
    //图标的位置
    grid: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 50,
      containLabel: true,
    },
    //核心配置
    series: [
      {
        data: props.data!.XingZhengShuJu,
        type: 'bar',
        //字体
        label: {
          show: true,
          position: 'top',
          color: '#fff'
        },
        //柱子的背景
        // showBackground:true,
        // backgroundStyle:{
        //   color:'rgba(180,180,180,0.2)'
        // },
        //每个柱子的样式
        itemStyle: {
          color: '#5D98CE',
          borderRadius: 5,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 5
        },
        barWidth:'50%',
      }
    ]
  }
  //3.通过实例填充图标
  xzChart.setOption(xzoption)
}
//检测来自父组件的数据变化更新图标
watch(() => props.data, () => {
  xzChart.clear()
  renderChart()
})

</script>

<style scoped></style>